import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import Home from './pages/Home';
import Detail from './pages/Detail';
import User from './pages/User';

// 所有Screen上的name值都不要重复

// 多一个Screen多一个tabs栏
// 以下两个都是导航器，需要维持它的记录,都是返回一个Screen一个Navigator
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// const HomeScreen = () => (
//   <Stack.Navigator
//     // 所有的Screen共有的属性可以用来放在这里用screenOptions
//     screenOptions={
//       {
//         headerStyle: {
//           // 标题栏的颜色
//           backgroundColor: '#ccc',
//         },
//         headerTitleAlign: 'center',
//         headerTintColor: '#fff',
//         headerTitleStyle: {
//           fontWeight: 'bold',
//         }
//       }
//     }
//   >
//     <Stack.Screen
//       name="Home" component={Home}
//       options={
//         {
//           title: '首页',
//           // headerBackVisible: false,
//           // headerShown: false,
//         }
//       }
//     />
//     <Stack.Screen
//       name="Detail" component={Detail}
//       // 使用params来动态的改变上面的名字，放一个回调函数给options，把实参相当于路由的那部分传过来
//       // 返回值是一个对象需要加（），要是用{}，则里面需要写return{对象}
//       options={
//         ({ route }) => ({ title: route.params.name })
//       }
//     />
//   </Stack.Navigator>
// )

const TabBar = () => (
  <Tab.Navigator
    screenOptions={{
      headerTintColor: 'red',//上面标题的颜色
      tabBarActiveTintColor: 'red',//响应的图标的颜色
      tabBarInactiveTintColor: '#eee',//未点击的图标颜色
      tabBarLabelStyle: { fontSize: 14 },//字体大小
      // tabBarActiveBackgroundColor:'#ccc',//背景颜色
      headerTitleAlign: 'center',//标题是否居中
      tabBarStyle: { backgroundColor: '#ccc' }//控制整个tab栏的颜色
    }}
  >
    <Tab.Screen
      options={{
        // 不显示本身的header
        // headerShown: false,
        title: '首页',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='home'
            color={color}
            size={size}
          />
        )
      }}
      name='home'
      component={Home}
    />
    <Tab.Screen
      options={{
        title: '用户中心',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='user'
            color={color}
            size={size}
          />
        )
      }}
      name='User'
      component={User}
    />
  </Tab.Navigator>
)

export default function App() {

  return (
    <NavigationContainer>

      {/* 首页的导航器 */}
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name='Root' component={TabBar} />
        <Stack.Screen name='Detail' component={Detail} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}
